<script setup>
import { ref } from 'vue'
import {
  User,
  Lock,
  Search,
  Files,
  DataAnalysis,
  Warning
} from '@element-plus/icons-vue'
import { userLoginService } from '@/api/user'
import RegisterPage from '@/components/RegisterPage.vue'
import { adminLoginService } from '@/api/admin'
import { useUserStore, useAdminStore } from '@/stores'
import { useRouter } from 'vue-router'
const userStore = useUserStore()
const adminStore = useAdminStore()
const router = useRouter()
// 页面状态管理
const isLogin = ref(true)
const isAdminLogin = ref(false)
// 切换页面显示
const togglePage = () => {
  isLogin.value = !isLogin.value
  isAdminLogin.value = false
  // clearAllData()
}

// 切换到管理员登录
const switchToAdminLogin = () => {
  isAdminLogin.value = true
  isLogin.value = true
  // clearAllData()
}

// 清零所有数据
const clearAllData = () => {
  // 清零登录表单
  loginForm.value = {
    userId: '',
    password: ''
  }

  // 清零管理员登录表单
  adminLoginForm.value = {
    adminAccount: '',
    password: ''
  }

  // 清零记住我
  rememberMe.value = false
}

// 记住我功能
const rememberMe = ref(false)
const handleRememberMe = () => {
  // 记住我逻辑
}

// 忘记密码功能
const handleForgotPassword = () => {
  // 忘记密码逻辑
}

// 登录表单
const loginFormRef = ref()
const loginForm = ref({
  userId: '123456',
  password: '123456'
})

// 管理员登录表单
const adminLoginFormRef = ref()
const adminLoginForm = ref({
  adminId: '123456',
  password: '123456'
})

// 登录表单验证规则
const loginRules = {
  userId: [
    { required: true, message: '请输入用户ID', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在2-20个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度6-20位', trigger: 'blur' }
  ]
}

// 管理员登录表单验证规则
const adminLoginRules = {
  adminAccount: [
    { required: true, message: '请输入管理员账号', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在2-20个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度6-20位', trigger: 'blur' }
  ]
}

async function submitLoginForm() {
  loginFormRef.value.validate()
  const {
    data: { data }
  } = await userLoginService(loginForm.value)
  userStore.changeToken(data.token)
  router.push('/')
}

async function submitAdminLoginForm() {
  await adminLoginFormRef.value.validate()
  const {
    data: { data }
  } = await adminLoginService(adminLoginForm.value)

  adminStore.changeToken(data.token)
  router.push('/admin/')
}
</script>

<template>
  <div class="main1">
    <!-- 使用 img 标签替代背景图片 -->
    <img
      src="@/assets/登录封面-Dzakj6YA.webp"
      alt="Background"
      class="bg-image"
    />
    <div class="bg">
      <el-row class="row" align="middle">
        <el-col :span="10" :offset="7">
          <el-card
            :style="
              isLogin
                ? 'max-width: 650px; margin: 0 auto;'
                : 'max-width: 800px; margin: 0 auto;'
            "
          >
            <template #header>
              <div class="card-header">
                <div class="header-row">
                  <div class="welcome-title">欢迎使用人才管理系统</div>
                  <el-button
                    type="text"
                    class="admin-login-btn"
                    @click="switchToAdminLogin"
                    v-if="!isAdminLogin"
                  >
                    管理员登录
                  </el-button>
                </div>
                <div class="register-title">
                  {{ isAdminLogin ? '管理员登录' : isLogin ? '登录' : '注册' }}
                </div>
              </div>
            </template>

            <!-- 管理员登录表单 -->
            <div v-if="isAdminLogin" class="login-form">
              <el-form
                :model="adminLoginForm"
                :rules="adminLoginRules"
                ref="adminLoginFormRef"
                label-width="100px"
                class="login-form"
              >
                <el-form-item label="管理员账号" prop="adminId">
                  <el-input
                    v-model="adminLoginForm.adminId"
                    placeholder="请输入管理员账号"
                  >
                    <template #prefix>
                      <el-icon class="icon-color"><User /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input
                    v-model="adminLoginForm.password"
                    type="password"
                    placeholder="请输入密码"
                    show-password
                  >
                    <template #prefix>
                      <el-icon class="icon-color"><Lock /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-button
                  type="primary"
                  class="login-btn"
                  @click="submitAdminLoginForm"
                  >管理员登录</el-button
                >

                <!-- 管理员登录提示 -->
                <div class="admin-login-tip">
                  <el-icon class="warning-icon"><Warning /></el-icon>
                  <span
                    >管理员账号仅限系统管理人员使用，普通用户请使用普通登录</span
                  >
                </div>
              </el-form>
            </div>

            <!-- 登录表单 -->
            <div v-else-if="isLogin" class="login-form">
              <el-form
                :model="loginForm"
                :rules="loginRules"
                ref="loginFormRef"
                label-width="80px"
                class="login-form"
              >
                <el-form-item label="用户ID" prop="userId">
                  <el-input
                    v-model="loginForm.userId"
                    placeholder="请输入用户ID"
                  >
                    <template #prefix>
                      <el-icon class="icon-color"><User /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input
                    v-model="loginForm.password"
                    type="password"
                    placeholder="请输入密码"
                    show-password
                  >
                    <template #prefix>
                      <el-icon class="icon-color"><Lock /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-button
                  type="primary"
                  class="login-btn"
                  @click="submitLoginForm"
                  >登录</el-button
                >

                <!-- 记住我和忘记密码 -->
                <div class="login-options hidden-sm-and-down">
                  <el-checkbox
                    v-model="rememberMe"
                    @change="handleRememberMe"
                    class="remember-me"
                  >
                    记住我
                  </el-checkbox>
                  <span class="forgot-password" @click="handleForgotPassword"
                    >忘记密码？</span
                  >
                </div>

                <!-- 功能说明 -->
                <div class="features-section hidden-sm-and-down">
                  <div class="feature-item">
                    <el-icon class="feature-icon"><Search /></el-icon>
                    <div class="feature-content">
                      <div class="feature-title">智能搜索</div>
                      <div class="feature-desc">
                        快速精准地查找和筛选人才信息
                      </div>
                    </div>
                  </div>
                  <div class="feature-item">
                    <el-icon class="feature-icon"><Files /></el-icon>
                    <div class="feature-content">
                      <div class="feature-title">数据管理</div>
                      <div class="feature-desc">统一管理人才档案和相关文档</div>
                    </div>
                  </div>
                  <div class="feature-item">
                    <el-icon class="feature-icon"><DataAnalysis /></el-icon>
                    <div class="feature-content">
                      <div class="feature-title">数据分析</div>
                      <div class="feature-desc">
                        对人才数据进行分析和可视化展示
                      </div>
                    </div>
                  </div>
                </div>
              </el-form>
            </div>

            <!-- 注册表单 -->
            <RegisterPage
              v-else
              height="500px"
              v-model:isLogin="isLogin"
              v-model:isAdminLogin="isAdminLogin"
            ></RegisterPage>
            <template #footer>
              <div class="back-login" @click="togglePage" v-if="!isAdminLogin">
                {{ isLogin ? '前往注册' : '返回登录' }}
              </div>
              <div
                class="back-login"
                @click="
                  () => {
                    isAdminLogin = false
                    // clearAllData()
                  }
                "
                v-else
              >
                返回普通登录
              </div>
            </template>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped lang="less">
.main1 {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.bg {
  position: relative;
  width: 100%;
  min-height: 100vh;
  .row {
    min-height: 100vh;
  }
}

.login-form {
  margin-top: 20px;
}

.el-form-item {
  margin-bottom: 18px;
}

.icon-color {
  color: #3da890;
}

.login-btn {
  width: calc(100% - 40px);
  margin: 0 20px;
  height: 45px;
  background-color: #3da890;
  border: none;
  font-size: 20px;
  letter-spacing: 2px;
  font-size: 16px;
}

.login-btn:hover {
  background-color: #36a07d;
}

.welcome-title {
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  margin-bottom: 10px;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  position: relative;
  padding-top: 20px;
}

.welcome-title {
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

.register-title {
  color: #3da890;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 8px;
}

.back-login {
  color: #3da890;
  text-align: center;
  font-size: 18px;
  cursor: pointer;
  margin-top: 10px;
  font-weight: 500;
}

.back-login:hover {
  color: #36a07d;
}

// 登录选项样式
.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 20px 30px 20px;
}

.remember-me {
  color: #3da890;
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #3da890;
    border-color: #3da890;
  }
  .el-checkbox__inner:hover {
    border-color: #3da890;
  }
}

.forgot-password {
  color: #3da890;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  position: relative;

  &:hover {
    &::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #3da890;
    }
  }
}

// 功能说明样式
.features-section {
  margin: 30px 20px 20px 20px;
}

.feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 8px;
  background-color: rgba(61, 168, 144, 0.05);
  transition: all 0.3s ease;

  &:hover {
    background-color: rgba(61, 168, 144, 0.1);
    transform: translateY(-2px);
  }
}

.feature-icon {
  font-size: 24px;
  color: #3da890;
  margin-right: 15px;
  flex-shrink: 0;
}

.feature-content {
  flex: 1;
}

.feature-title {
  font-weight: bold;
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}

.feature-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.admin-login-btn {
  color: #3da890;
  font-size: 16px;
  font-weight: 500;
  padding: 0;
  height: auto;
  line-height: 1;
  border: none;
  background-color: transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
  position: absolute;
  right: 0;
  &:hover {
    color: #36a07d;
  }
}

.admin-login-tip {
  display: flex;
  align-items: center;
  margin-top: 20px;
  color: #c5c6c6;
  font-size: 14px;
  .warning-icon {
    margin-right: 8px;
    font-size: 18px;
  }
}
</style>
